<template>
	<view>
		
		<view style="padding: 20rpx 20rpx;">
			 <!-- <canvas canvas-id="canvas"></canvas> -->
			<u-collapse>
				<u-collapse-item style="border-bottom: 1px dashed #fc3fb9;" :title="item.name" v-for="(item, index) in datalist" :key="item._id">
					<view class="jq_tile">
							<text selectable="true">名称：{{item.name}}</text>
							<text selectable="true">日期：{{item.pub_year+'年'+item.pub_date}}</text>
							<text selectable="true">农历：{{item.pri_date}}</text>
					</view>
					<titleBox msg="节气简介"></titleBox>
					<text selectable="true" v-html="item.des"></text>
					<titleBox msg="节气由来"></titleBox>
					<text selectable="true" v-html="item.youLai"></text>
					<titleBox msg="节气习俗"></titleBox>
					<text selectable="true" v-html="item.xiSu"></text>
					<titleBox msg="节气养生建议"></titleBox>
					<text selectable="true" v-html="item.heath"></text>
					<button type="default" @click="copytext(item.name)" class="but">画图</button>
				</u-collapse-item>
			</u-collapse>
		</view>
	</view>
</template>

<script>
	import Painter from 'mp-painter'
	import titleBox from '../../component/titlebox.vue'
	export default {
		components:{
			titleBox
		},
		data() {
			return {
				datalist: [],
				isloading:false
			}
		},
		onLoad() {
			this.getdata()
		},
		async onReady() {
			let painter = new Painter(uni.createCanvasContext("canvas"));
			await painter.draw({
			    type: "text",
			    color: "#f33",
			    fontSize: 60, // = 60rpx
			    content: "Hello World" //绘制的文本
			});
		},
		methods: {
			async getdata() {
				this.isloading=true
				const db = uniCloud.database()
				let res = await db.collection('solarTerms24').get()
				console.log(res);
				if (res.result.code === 0) {
					this.datalist = res.result.data
					this.isloading=false
				}
			},
			copytext(name){
				uni.navigateTo({
					url:'./jqtu?name='+name
				})
			}
		}
	}
</script>

<style scoped>
.jq_tile{
	display: flex;
	flex-direction: column;
	color: #f95cc9;
}
.but {
		width: 45%;
		font-weight: bold;
		margin: 30rpx auto;
		background-color: #ff9900;
		color: #fff;
	}
</style>
